<style lang="less">
  @import './rule-management.less';
</style>

<template>
  <div class="rule-management">
    <div class="title-option-box">
      <h1 class="title">规则管理</h1>
      <p class="option">
        <Button type="primary" @click="addNewRules">新增</Button>
        <Button type="primary" @click="handleSave">保存</Button>
        <Button type="primary" @click="prevBtn">
          <Icon type="ios-arrow-back" size="15"></Icon>
        </Button>
        <Button @click="nextBtn" type="primary">
          <Icon type="ios-arrow-forward" size="15"></Icon>
        </Button>
      </p>
    </div>
    <div class="rule-management-content scrollbar-small clearfix">
      <Table
        :columns="tableColumns"
        :data="tableData"
        :no-data-text="noData"
        ></Table>
    </div>
    <!-- 新增规则modal框 -->
    <edit-rule
      ref="editRule"
      @on-add-cancel="cancelNewRuleModal"
      @on-edit-ok="certainEditRuleModal"
      @update-table="getTableData"
      :newRuleModalShow="newRuleModalShow"
      :projectId="projectId"
      ></edit-rule>
      <!-- 测试弹窗 -->
      <test-modal
        ref="testModal"
        :projectId="projectId"
        ></test-modal>
  </div>
</template>

<script>
import dayjs from 'dayjs'
import { setDsResource, showMessageTip } from '@/libs/util'
import editRule from '@/components/edit-rule/edit-rule'
import testModal from './components/test-modal'
import { queryResourceBaseInfoApi, deleteResourceBaseInfoByIdApi } from '@/api/project-resource'

export default {
  name: 'rule_management',
  props: {
    createId: {
      type: Number
    }
  },
  data () {
    return {
      tableColumns: [],
      tableData: [],
      noData: '加载中...',
      newRuleModalShow: false // 控制新增modal框显示隐藏
    }
  },
  components: {
    editRule,
    testModal
  },
  computed: {
    projectId () {
      return this.$route.params.projectId === '_create' ? this.createId : this.$route.params.projectId
    }
  },
  methods: {
    handleSave () {
      // TODO: 测试代码
      // const pathname = location.pathname
      // const dsResource = JSON.parse(sessionStorage.getItem('DS_RESOURCE'))
      // const ruleList = (dsResource[pathname] || {}).ruleList || []
      // ruleList.push({name: `name_${Date.now()}`, value: `value_${Date.now()}`})
      // console.log(12212, dsResource)
      // sessionStorage.setItem('DS_RESOURCE', JSON.stringify(dsResource))
    },
    setTableColumns () {
      const columns = [
        {
          key: 'resName',
          title: '名称'
        }, {
          key: 'resCode',
          title: '编码'
        }, {
          key: 'resDesc',
          title: '描述'
        }, {
          key: 'ruleSetType',
          title: '分类'
        }, {
          key: 'updateAt',
          title: '修改时间',
          width: 180,
          render: (h, { row }) => {
            return (
              <span>{ row.updateAt ? dayjs(row.updateAt).format('YYYY-MM-DD HH:mm:ss') : '无' }</span>
            )
          }
        }, {
          key: 'updateBy',
          title: '修改者'
        }, {
          key: 'option',
          title: '操作',
          width: 240,
          render: (h, { row }) => {
            const self = this
            return (
              <span>
                <a
                  onClick={ () => self.clickTest(row) }
                  style={{ marginRight: '4px' }}>测试</a>
                <a onClick={ () => self.clickDownload(row) }
                  style={{ marginRight: '4px' }}>导出</a>
                <a onClick={ () => self.clickEdit(row) }
                  style={{ marginRight: '4px' }}>编辑</a>
                <a onClick={ () => self.clickDelete(row) }
                  style={{ marginRight: '4px', color: '#ff5500' }}>删除</a>
              </span>
            )
          }
        }
      ]
      this.tableColumns = columns
    },
    getTableData () {
      const path = {
        projectId: this.projectId
      }
      const params = {
        resType: 'rule'
      }
      this.tableData = []
      this.noData = '加载中...'
      queryResourceBaseInfoApi(path, params).then((res) => {
        if (res.data.code === 2000) {
          const { data = {} } = res.data || {}
          this.tableData = data.items || []
          const ruleList = this.tableData.map((ele) => {
            return {
              name: ele.resName,
              value: ele.resCode
            }
          })
          setDsResource(window.location.pathname, 'ruleList', ruleList)
          this.noData = data.total ? '' : '未查询到数据'
        } else {
          this.$Message.error({
            content: res.data.msg || '加载失败，请重试',
            duration: 4
          })
        }
      })
    },
    prevBtn () {
      const params = {
        activeName: 'ruleManagement',
        option: 'prev'
      }
      this.$emit('on-move-forward', params)
    },
    nextBtn () {
      const params = {
        activeName: 'ruleManagement',
        option: 'next'
      }
      this.$emit('on-move-forward', params)
    },
    // 新增按钮
    addNewRules () {
      this.newRuleModalShow = true
      this.$refs.editRule.addNewRuleForm()
    },
    /**
     * 点击表格 测试
     * @param {row} [Object] 点击数据行信息
      */
    clickTest (row) {
      this.$refs.testModal.getInputData(row)
    },
    /**
     * 点击表格 导出
     * @param {row} [Object] 点击数据行信息
      */
    clickDownload (row) {

    },
    /**
     * 点击表格 编辑
     * @param {row} [Object] 点击数据行信息
      */
    clickEdit (row) {
      this.newRuleModalShow = true
      this.$refs.editRule.setEditForm(row)
    },
    /**
     * 点击表格 删除
     * @param {row} [Object] 点击数据行信息
      */
    clickDelete (row) {
      this.$Modal.confirm({
        title: '删除规则',
        content: '<p>确定删除此条规则？</p>',
        onOk: () => {
          const params = {
            projectId: this.projectId,
            resId: row.resId
          }
          deleteResourceBaseInfoByIdApi(params).then((res) => {
            showMessageTip(this, res.data.code, '删除成功', res.data.msg || '删除失败，请重试')
            if (res.data.code === 2000) this.getTableData()
          })
        }
      })
    },
    // 定义“通用数据库表格”表头
    setGeneraColumns () {
      this.generalDataColumns = [
        {
          key: 'ruleNmae',
          title: '规则名称'
        }, {
          key: 'ruleClass',
          title: '规则类型'
        }, {
          key: 'businessScene',
          title: '业务场景'
        }, {
          key: 'funcType',
          title: '功能类型'
        }, {
          key: 'ruleClass',
          title: '规则分类'
        }, {
          key: 'remark',
          title: '备注'
        }
      ]
    },
    // 改变“通用数据库表格” 选中项 事件
    selectgeneraData (select) {

    },
    // 新增modal框取消事件
    cancelNewRuleModal () {
      this.newRuleModalShow = false
    },
    /**
     * @param {currentTabs} [String] 当前新增modal框选中的tab
     * @param {data} [Object] 当前需增加的数据项
      */
    certainEditRuleModal (currentTabs, data) {

    }
  },
  activated () {
  },
  mounted () {
    this.setTableColumns()
    this.setGeneraColumns()
    this.getTableData()
  }
}
</script>

<style>

</style>
